<template>
  <div class="contain">
    <div class="title" @click="getIndexPage">
      <div>
        <el-image class="title-image" :src="titleImage" fit="fill" />
        <span>⭐⭐⭐</span>
      </div>
    </div>

    <div class="from">
      <h3>用户登录</h3>
      <el-form
        ref="ruleForm"
        :model="user"
        status-icon
        :rules="rules"
        label-width="130px"
      >
        <el-form-item label="邮箱" prop="mail">
          <el-input
            v-model="user.mail"
            type="text"
            placeholder="请输入邮箱"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="user.password"
            type="password"
            placeholder="请输入密码"
            style="width: 300px"
          />
        </el-form-item>
      </el-form>
      <div class="submit">
        <el-button type="primary" @click="login" style="width: 350px"
          >登录</el-button
        >
      </div>
      <br />
      <router-link to="/register">还没账号？点击注册</router-link>
    </div>
  </div>
</template>

<script>
import LoginApi from '@/api/core/LoginAndReg.js'
import Cookie from 'js-cookie'
export default {
  name: 'Login',

  data() {
    var checkEmail = (rule, value, callback) => {
      const reg =
        /^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/
      if (!reg.test(value)) {
        callback(new Error('请输入有效的邮箱'))
      }
      callback()
    }
    return {
      user: {},
      titleImage: require('../../assets/image/title.png'),
      rules: {
        mail: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur',
          },
          {
            validator: checkEmail,
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
      },
    }
  },

  methods: {
    //用户登录
    login() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          LoginApi.login(this.user)
            .then((response) => {
              Cookie.set('authorization', response.data.authorization)
              Cookie.set('userId', response.data.user.id)
              Cookie.set('mail', response.data.user.mail)
              Cookie.set('avatar', response.data.user.avatarUrl)
              Cookie.set('nickName', response.data.user.nickName)
              this.$router.push('/')
            })
            .catch((error) => {
              this.$message.error(error.message)
            })
        } else {
          this.$message.error('表单没有按规则填写')
        }
      })
    },

    getIndexPage() {
      this.$router.push('/')
    },
  },
}
</script>

<style scoped>
.contain {
  width: 100%;
  height: 100%;
  background: url('/src/assets/image/login.jpg') no-repeat center center;
  position: fixed;
  background-size: 100% 100%;
}
.title {
  display: flex;
  margin-top: 20px;
  margin-left: 40px;
}
div {
  transition: all 1s;
}
.title :hover {
  font-style: oblique;
}
.title span {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.from {
  padding-top: 30px;
  width: 500px;
  height: 250px;
  margin-top: 300px;
  margin-left: 200px;
  background-color: aliceblue;
  text-align: center;
}
.submit {
  margin-left: 10px;
}
</style>
